| Emmet 語法 | 展開結果 | 說明 |
|---|---|---|
div |
<div></div> |
建立基本元素 |
ul>li*3 |
<ul><li></li><li></li><li></li></ul> |
巢狀結構 + 重複產生 |
div.container |
<div class="container"></div> |
加 class |
div#header |
<div id="header"></div> |
加 id |
div.container#main |
<div class="container" id="main"></div> |
同時加 class 和 id |
nav+main+footer |
三個同層元素 | + 表示兄弟元素 |
div>ul>li*3 |
巢狀元素 | > 表示子元素 |
section>h1+p |
<section><h1></h1><p></p></section> |
常見內容結構 |
| Emmet 語法 | 展開結果 | 說明 |
|---|---|---|
a:link |
<a href=""></a> |
超連結 |
img |
<img src="" alt=""> |
圖片元素 |
input:checkbox |
<input type="checkbox"> |
特定 input 類型 |
input:password |
<input type="password"> |
密碼欄位 |
label[for=email] |
<label for="email"></label> |
加任意屬性 |
input[disabled] |
<input disabled> |
無值屬性 |
.box[data-type=main] |
<div class="box" data-type="main"></div> |
自定義屬性 |
| Emmet 語法 | 展開結果 | 說明 |
|---|---|---|
lorem |
假文 30 個單字 | 英文亂數文字（預設 30 個） |
lorem10 |
假文 10 個單字 | 可指定數量 |
p{Hello} |
<p>Hello</p> |
{} 可加入文字內容 |
a{Click me} |
<a href="">Click me</a> |
加上連結與文字 |
| Emmet 語法 | 展開結果 | 說明 |
|---|---|---|
m10 |
margin: 10px; |
支援常見縮寫（m, p） |
mt20 |
margin-top: 20px; |
單一方向 |
p0 |
padding: 0; |
|
w100 |
width: 100px; |
|
h50p |
height: 50%; |
支援 px / % / vw 等單位 |
bgc#eee |
background-color: #eee; |
簡寫色碼 |
pos:r |
position: relative; |
位置縮寫 |
d:f |
display: flex; |
排版常用 |
-在 VS Code 中，Emmet 是內建的，不需要額外安裝。
-輸入完縮寫後，按下 Tab 鍵展開（有時需確認光標在空白區域中）。
-適用於 HTML、CSS、Sass、React (JSX) 等多種語言環境。
iThome鐵人賽
看影片追技術